let iptdiv=document.querySelector("#ipt textarea");
let subt=document.getElementById("submit");
var zIndex=0;
var content=document.getElementById("content");
let count=document.getElementById("count");


subt.onclick=subtCmt;
document.onkeydown=function(e){
    var e = e||window.event;
    if(e.keyCode===13&&!subt.disableBtn){
        subtCmt()
    }
}
function dsbtn(){
    let val=iptdiv.value;
    if(!val){
        subt.disableBtn=true;
        subt.style.background="#ccc";
    }
}
dsbtn()

iptdiv.oninput=function(){
    subt.disableBtn=false;
    subt.style.background="hotpink";
    dsbtn()
}

function subtCmt(){
    let content=iptdiv.value;
    let name=prompt("请输入昵称");
    if(!name){
        alert("昵称不能为空")
        return
    }
    $.ajax({
        url:"http://chst.vip:1902/students/addlist",
        type:"post",
        data:{
            content,
            name
        }
    }).then(res=>{
        if(res.state){
            Orders()
        }else{
            alert("请输入内容")
        }
    })
}

function Orders(){
    fetch(`http://chst.vip:1902/students/getstulist`)
        .then(body => body.json())
        .then(res => {
            res = res.data
            console.log(res);
            count.innerHTML = `评论:${res.length}条`;
            res.map(items => {
                var tip = document.createElement("div");
                tip.className = "tip1";

                tip.id = items.id;
                str =`<div class="tip_h" title="双击关闭纸条">
                        <div class="num">第${items.id.slice(8)}条 ${items.time}</div>
                        <div class="close" title="关闭纸条">×</div>
                        <div class="clr"></div>
                    </div>
                <div class="tip_c">${items.content}</div>
                <div class="tip_f">
                    <div class="icon">
                        <img src="./images/bpic_1.gif" alt="" title="">
                    </div>
                    <div class="name">${items.name}</div>
                    <div class="clr"></div>
                    </div>`
                tip.innerHTML = str
                content.appendChild(tip);
                var x = parseInt(Math.random() * 730 + 472);        
                var y = parseInt(Math.random() * 450);
                tip.style.left = x + "px";
                tip.style.top = y + "px";
                tip.onselectstart = function (e) {
                    var e = e||window.event;
                    e.preventDefault()
                }
                tip.onclick = function () {
                    zIndex++;
                    this.style.zIndex = zIndex;
                };

                var header = tip.firstElementChild;
                header.ondblclick = function () {
                    var tip = this.parentNode;
                    let id = this.parentNode.id;
                    del(tip, id);
                };

                header.onmousedown = function (e) {
                    var e = e||window.event;
                    let ofx = e.offsetX;
                    let ofy = e.offsetY;
                    console.log(ofx ,ofy);
                    let _this = this;

                    content.onmousemove = function (e) {
                        var e = e||window.event;
                        let pgx = e.pageX - ofx;
                        let pgy = e.pageY - ofy;

                        let minLeft = content.offsetLeft;
                        let maxLeft = content.offsetWidth + content.offsetLeft - _this.offsetWidth;

                        let maxTop = content.offsetHeight - _this.parentNode.offsetHeight;
                        let minTop = 0;

                        if (pgx <= minLeft) {
                            pgx = minLeft;
                        } else if (pgx >= maxLeft) {
                            pgx = maxLeft
                        }

                        if (pgy <= minTop) {
                            pgy = minTop;
                        } else if (pgy >= maxTop) {
                            pgy = maxTop
                        }

                        _this.parentNode.style.left = pgx + "px";
                        _this.parentNode.style.top = pgy + "px";
                    }
                }
                header.onmouseup = function () {
                    content.onmousemove = null
                }

                var close = tip.getElementsByClassName("close")[0];
                close.onclick = function () {
                    let id = this.parentNode.parentNode.id;
                    var tip = this.parentNode.parentNode;
                    del(tip, id)
                };
            })
        })
}
Orders()

function del(el, id) {
    let sure = confirm('你确定要删除吗');
    if (!sure) {
        alert('已取消删除');
        return
    }
    $.ajax({
            url: "http://chst.vip:1902/students/del",
            data: {
                id
            }
        })
        .then(res => {
            // console.log(res)
            if (res.state) {
                content.removeChild(el);
                Orders()
            } else {
                alert(res.msg)
            }
        })
}